<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="isShowDialogComponent"
      width="50%"
      :before-close="handleClose">
      <el-form
        ref="formRef"
        :model="form"
        label-width="100px"
        :rules="formRules"
        v-loading="loading"
        element-loading-text="拼命加载中......"
      >
        <el-form-item label="绑定校区">
          <el-select v-model="form.CampusID" placeholder="请为教室绑定校区">
            <el-option
              v-for="item in campusList"
              :key="item.Value"
              :label="item.Text"
              :value="item.Value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教室名称" prop="RoomName">
          <el-input v-model="form.RoomName" :maxLength="20"></el-input>
        </el-form-item>
        <el-form-item label="教室地址" prop="Address">
          <el-input v-model="form.Address" :maxLength="30"></el-input>
        </el-form-item>
        <el-form-item label="教室说明" prop="Introduce">
          <el-input v-model="form.Introduce" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose" :disabled="loading">取 消</el-button>
    <el-button type="primary" @click="submitEvent" :disabled="loading">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import ClassroomManage from '../../../model/classroomManage'
import ProofRules from '../../../ck/util/proofRules'

export default {
  name: 'AddAndEditDialog',
  props: {
    title: String,
    isShowDialogComponent: Boolean,
    judgeId: Number
  },
  data () {
    return {
      loading: false,
      form: {
        CampusID: null,
        RoomName: '',
        Address: '',
        Introduce: ''
      },
      //保存关于校区的数据
      campusList: [],
      //验证规则
      formRules: {
        RoomName: ProofRules.requiredFieldAndLength('教室名称', 2, 20),
        Address: ProofRules.requiredFieldAndLength('教室地址', 5, 30),
        Introduce: ProofRules.requiredFieldAndLength('教室说明', 2, 200)
      },
    }
  },
  created () {
    this.getCampusInfo()
    this.judgeEditButton()
  },
  methods: {
    //获取校区信息
    async getCampusInfo () {
      const res = await ClassroomManage.getCampusInfo()
      this.campusList = res
    },
    //对话框关闭触发
    handleClose (payload) {
      this.$emit('handleClose', payload)
    },
    //确定按钮
    submitEvent () {
      //表单预验证
      this.$refs.formRef.validate(async valid => {
        if (!valid) {
          this.$message.error('请填写表单必填项')
        } else {
          try {
            if (this.judgeId === 0) {
              //添加操作
              if (this.form.CampusID === null) {
                this.$message.error('请为教室绑定校区')
              } else {
                this.loading = true
                await ClassroomManage.addClassroom(this.form)
                this.loading = false
                this.$message.success('添加教室信息成功')
                this.$emit('handleClose', 'submitButton')
              }
            } else {
              //编辑操作
              this.loading = true
              await ClassroomManage.editClassroom(this.judgeId, this.form)
              this.loading = false
              this.$message.success('编辑教室信息成功')
              this.$emit('handleClose', 'submitButton')
            }
          } catch (err) {
            this.loading = false
          }
        }
      })
    },
    async judgeEditButton () {
      if (this.judgeId !== 0) {
        const res = await ClassroomManage.showClassroomDetail(this.judgeId)
        this.form = res
      }
    }

  }
}
</script>

<style scoped>


</style>
